<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子模型</title>
		<style type="text/css">
			body{
				height: 3000px;
			}
			.y1{
				border: 1px;
				width:200px;
				height:100px;
				background-color:black;
				border-radius:200px 200px 0 0;
				position:relative;
			}
			.y2{
				border:1px ;
				border-color: #000000;
				width:200px;
				height:100px;
				background-color:white;
				border-radius: 0 0 200px 200px;
				position: relative;
			}
			.sub1{
				width:100px;
				height:100px;
				background-color:black;
				border-radius:50%;
				position: absolute;
				top: 50px;
				z-index: 10;
			}
			.sub2{
				width:100px;
				height:100px;
				border-radius:50%;
				background-color:white;
				position: absolute;
				top: -50px;
				right: 0px;
				
			}
			.sub1 div {
				width:30px;
				height:30px;
				background-color:white;
				padding: 0px;
				border-radius:50%;
				position: absolute;
				left:35px;
				top:35px;		
			}
			.sub2 div {
				
				width:30px;
				height:30px;
				background-color:black;
				padding: 0px;
				border-radius:50%;
				position: absolute;
				left:35px;
				top:35px;		
			}
			.taiji {
				border-color: beige;
				width:200px;
				height:200px;
				position: absolute;
				right:100px;
				top:0px;
				box-shadow: 0px 0px 20px #000000;
				border-radius:50%;
			}
		</style>
	</head>
	
	<body>
	
	<div class="taiji">
		<div class="y1"> 
			<div class="sub1">
					<div></div>			
			</div>
		</div>		
		<div class="y2"> 
			<div class="sub2">
				<div></div>	
			</div>
		</div>
	</div>
	
	
	<!--按钮-->
	<button onclick="DR(10)">向右移动</button>
	<button onclick="DR(-10)">向左移动</button>
	<button onclick="DT(-10)">向上移动</button>
	<button onclick="DT(10)">向下移动</button>
	<button onclick="DLT(10,10)">向右下移动</button>
	<button onclick="DLT(10,-10)">向右上移动</button>
	<button onclick="DLT(-10,10)">向左下移动</button>
	<button onclick="DLT(-10,-10)">向左上移动</button>
	<script type="text/javascript">
	var l= 100;
	var t= 0;
	function DR(arg){
		//获取太极对象
	var tj= document.querySelector(".taiji")
		//改变太极坐标
	tj.style.left=l+"px";
	l=l+arg;	
	}	
	
	function DT(arg){
		//获取太极对象
	var tj= document.querySelector(".taiji")
		//改变太极坐标
	tj.style.top=t+"px";
	t=t+arg;	
	}		
	
	function DLT(x,y){
		//获取太极对象
	var tj= document.querySelector(".taiji")
		//改变太极坐标
	tj.style.top=t+"px";
	tj.style.left=l+"px";
	t=t+y;
	l=l+x;
	}		
	</script>	

	</body>
</html>
